<script type="text/template" id="history_row">
  <tr>
    <% if(left) {%>
      <td> <span class="stars_<%=left_stars%>"/> </td>
      <td> <div class="<%= mark_as(left[0])  %>"><%= left[0] %></div> </td>
      <td> <div class="<%= mark_as(left[1])  %>"><%= left[1] %></div> </td>
      <td> <div class="<%= mark_as(left[2])  %>"><%= left[2] %></div> </td>
      <td> <div class="<%= mark_as(left[3])  %>"><%= left[3] %></div> </td>
    <% }else { %>
      <% for(var i=0; i<4; ++i) { %>
        <td><div class='token_invis'></div></td>
      <% } %>
      <td> <span class="stars_invis>"/> </td>
    <% } %>
    <td> <div class="divider_number"><%= row+1 %></div> </td>
    <% if(right) {%>
      <td> <div class="token_yellow"><%= right[0] %></div> </td>
      <td> <div class="token_yellow"><%= right[1] %></div> </td>
      <td> <div class="token_yellow"><%= right[2] %></div> </td>
      <td> <div class="token_yellow"><%= right[3] %></div> </td>
      <td> <span class="stars_<%= right_stars %>"/> </td>
    <% }else { %>
      <% for(var i=0; i<4; ++i) { %>
        <td><div class='token_invis'></div></td>
      <% } %>
      <td> <span class="stars_invis>"/> </td>
    <% } %>
  </tr>
</script>

<div id='in_game'>
  <div class="nav">
    <button id='back'>Back</button>
    <button id="refresh">
      <img src="images/refresh.png"/>
      Refresh
    </button>
  </div>
  <div id="play_space">
    <div class='winner game-end'>
      <img src='images/stars_winner.png' alt='Star'/>
      You are the winner!
    </div>
    <div class='loser game-end'>
      <img src='images/rip.png' alt='Star'/>
      You've lost.
    </div>
    <div class='tie game-end'>
      <img src='images/tie.png' alt='Star'/>
      It's a tie.
    </div>
    <div class="header">
      <span id="left" class="player">
        <span class="name"></span>
        <div class="indicator"></div>
      </span>
      <span id="right" class="player">
        <div class="indicator"></div>
        <span class="name"></span>
      </span>
    </div>
    <div id="word_entry">
      <div>Enter your secret word</div>
      <div class="messages">
        This is some kind of error
      </div>
      <input type='text' id="word" size='27' maxlength='4'/> 
      <button id="enter">Enter</button>
    </div>
    <div id="play">
      <div id="play_body">
        <table id="history"> </table>
      </div>
      <div class="messages"></div>
      <div id="entry">
        <div id="pad">
          <table>
            <tr>
              <td> <div class="token_ghost"></div> </td>
              <td> <div class="token_ghost"></div> </td>
              <td> <div class="token_ghost"></div> </td>
              <td> <div class="token_ghost"></div> </td>
            </tr>
          </table>
        </div>
        <button id='guess'>Guess</button>
      </div>

      <div id="selector">
        <table>
        </table>
      </div>
    </div>
  </div>
</div>
